<template>
   <div class="comment-content">
       <h1>发表评论</h1>
       <hr>
       <textarea placeholder="请输入评论的内容(最多评论120字)" maxlength="120" v-model="comment_area"></textarea>
       <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
        <!-- 评论区域 -->
       <div class="comment-dis" v-for="(item,i) in comments" :key="item.id">
           <div class="name">第{{i+1}}楼 &nbsp;用户: {{item.user_name}} &nbsp; 发布时间: {{item.add_time | filters}}</div>
           <div class="connect">
               {{item.content}}
           </div>
       </div>
       <mt-button class="mint-button mint-button--danger mint-button--large is-plain" @click="getmore">加载更多</mt-button>
   </div>
</template>

<script>
import { Toast } from 'mint-ui'
    export default {
        data: function(){
            return {
                pageindex: 1,
                comments: [],
                comment_area: ''
            }

        },
        created: function(){
             this.getnewscomment()
        },
        methods: {
           getnewscomment: function(){
            //    console.log(this.id)
            //这个是子组件，安插在各个组件的下面，所以当父组件需要用到评论的时候，这个组件在创建的时候就去数据库调用数据，在调用的时候需要传递参数
            //以确保调用不同的表格，这个时候就需要父组件向子组件传值了，子组件接受到值之后，拼接在请求地址上，向服务端发送请求，
            //服务端根据参数的不同来确认是哪个父组件来请求的，提取相应的数据
            this.$http.get(`http://127.0.0.1:4000/comment/?artid=${this.id}&pageindex=${this.pageindex}`).then(function(res){
                console.log(res.body)
                if(res.body.message != 'ok'|| res.body.success != true){
                    Toast('获取评论失败')
                }else{
                    if(res.body.newscomments.length!=0){
                        // this.comments= res.body.newscomments
                     return this.comments= this.comments.concat(res.body.newscomments)
                    }
                    Toast('暂无更多评论')
                    
                }
            })
           },
           getmore: function(){
               this.pageindex++
               console.log(this.pageindex)
               this.getnewscomment()
           },
            //提交评论
           postcomment: function(){
               if(this.comment_area === ''){
                   return Toast('评论内容不能为空')
               }
               this.$http.post(`http://127.0.0.1:4000/api/postcomment/?artid=${this.id}`,{content: this.comment_area.trim()}).then(function(res){
                    //console.log(res)
                    if(res.body.message=== 'ok' && res.body.success=== true){
                        Toast('评论成功')
                        var comObj={
                            user_name: '小蜜蜂',
                            add_time: new Date(),
                            content: this.comment_area.trim()
                        }
                        this.comments.unshift(comObj)
                        this.comment_area= ''
                    }
               })
           }
        },

        //子组件节后父组件的值之后，要在这里初始化一下，才能用
         props: ['id']
       
    }

</script>

<style lang="scss" scoped>
    .comment-content{
        h1 {
            font-size:24px;
        }
        textarea {
            margin: 0;
            height: 80px;
        }
        .comment-dis {
            margin-top: 5px;
            font-size: 14px;
            .name {
                background: #ccc;
                line-height: 30px;
            }
            .connect{
                line-height: 30px;
                text-indent: 2em;
            }
        }
    }
</style>